<template>
  <div class="certificate-expire-conn">
    <template v-if="props.time">
      <p v-if="props.status == 4 || props.versionStatus == 4" class="info-status error">已吊销</p>
      <template v-else>
        <p class="info-status" :class="[renderExpiredTimeStyle(props.time)]">
          {{ renderExpiredTimeDay(props.time) }}
        </p>
        <p>过期时间：{{ props.time }}</p>
      </template>
    </template>
    <span v-else>--</span>
  </div>
</template>
<script lang="ts">
export default {
  name: 'CertifiacateExpire',
};
</script>
<script setup lang="ts">
import dayjs from 'dayjs';

const props = defineProps({
  status: Number,
  versionStatus: Number,
  time: String,
});

const getDiffDays = (date: string) => {
  // 获取当前日期
  const currentDate = dayjs();
  // 设定目标日期
  const targetDate = dayjs(date); // 替换为你的目标日期
  // 计算两个日期之间的天数
  return Math.round(targetDate.diff(currentDate, 'day', true));
}

/**
 * 样式处理
 * @param date
 */
const renderExpiredTimeStyle = (date: string) => {
  if (props.status <= 0)  return 'error';

  const diffDays = getDiffDays(date);

  return diffDays >= 15 ? 'success' : diffDays >= 0 ? 'warn': 'error';
}

const renderExpiredTimeDay = (date: string) => {
  const diffDays = getDiffDays(date);
  if (diffDays >= 0) {
    return `生效中 · ${diffDays}天后过期`;
  }
  return `已失效 · ${diffDays}天`;
};
</script>
<style lang="less" scoped></style>
